<script setup>

	import { ref, toRefs, reactive, onMounted } from "vue";
	//==============================vant组件
	import { Button, showToast } from 'vant';
	import vancheckbox from "./components/checkbox.vue";//组件插槽

	import HelloWorld from "./pages/HelloWorld.vue";
	import page from "./pages/page.vue";

	import { store } from './js/store.js';
	import * as func from "./js/function.js";

	const pageRef = ref(null);//page页

	// const obj = reactive({
	//   vpage: true,
	// });
	// const {vpage} = toRefs(obj)

	const hii = ref("你好"); //传递可响应的变量

	function log(msg) {
		hii.value = "你好啊！✈";
		console.log(msg, pageRef.value.count, checked.value);
	}

	const vpage = ref({});//初始页

	function onpage(index) {
		if (vpage.value[index] == true) {
			return;
		}
		location.hash = '#/' + index;
	}
	const page_an = ref({in:'animate__fadeInRight',out:'animate__fadeOutRightBig'})

	//setup内方法
	onMounted(() => {
		const ele = document.querySelectorAll('.page');

		ele.forEach(element => {
			element.addEventListener('animationend', () => {
				if (element.classList.contains(page_an.value.out)) {
					element.classList.add('hide');
				}
			});
		});
	});


	const checkbox = ref(null);
	const checked = ref(true);

	showToast('vant 轻提示');

	//路由功能
	const pageRouter = new func.Router();
	pageRouter.init();
	pageRouter.route("/hello", function () {
		vpage.value.hello=true;
	},function () {
		vpage.value.hello=false;
	});
	pageRouter.route("/page", function () {
		vpage.value.page=true;
	},function () {
		vpage.value.page=false;
	});

</script>

<script>

	//常规写法
	export default {
		data() {
			return {
			}
		},
		methods: {
			log(msg) { }
		},
		mounted() {
			console.log('loadend');
		}
	}

</script>

<template>

	<div class="wrap">
		<header></header>
		<div class="main pile">
			<div
				:class="['page animate__animated animate__faster',vpage.hello?page_an.in:page_an.out]">
				<HelloWorld msg="Hello Vue 3 + Vite 标题" />
			</div>

			<div
				:class="['page animate__animated animate__faster',vpage.page?page_an.in:page_an.out]">
				<page ref="pageRef" msg="Page页的显示" :hi="hii" @tohost="log" />
			</div>
		</div>

		<!-- 自定义组件插槽 -->
		<vancheckbox v-model="checked" ref="checkbox"><template v-slot:aaa>复选框AAA</template></vancheckbox>
		<div>公用状态：{{store.count}}</div>
		<Button>Vant按钮</Button>
		<hr />
		<div id="menu">
			<li @click="onpage('hello')" :class="[{active:vpage.hello}]"><i><img src="/images/menu1.png"></i>helloworld页</li>
			<li @click="onpage('page')" :class="[{active:vpage.page}]"><i><img src="/images/menu2.png"></i>page页</li>
			<li @click="log('子组件变量：')">获取page组件子集变量</li>
		</div>
	</div>




</template>

<style>
	#app {
		width: 100%;
		height: 100%;
	}

	.pile {
		overflow: hidden;
	}

	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		-webkit-overflow-scrolling: touch;
	}
</style>